/*
 * @Title: 写游记模块
 * @Created by: gsjPC 
 */
<template>
	<view>
		<comHeader :config="navConfig" :rightTapHandle="rightTapHandle"/>
		<view class="addYjWrap">
			<!-- 添加标题 -->
			<view class="addYjTitle">
				<input 
				type="text" 
				placeholder="请输入标题"
				placeholder-style="color:#999999"/>
			</view>
			<!-- 添加地点 -->
			<view class="addYj-address" @tap="chooseLocation">
				<view><uni-icon type="location-filled" size="18" :color="addAddress ? '#83BAFF' : '#999999'"></uni-icon></view>
				<view><text :class="addAddress ? 'addBlue' : ''">{{addAddress || '添加地点'}}</text></view>
			</view>
			<!-- 添加封面 -->
			<view class="addFm">
				<view @tap="addFmBtn">
					<image src="/static/addyj-tit.png" v-if="isShowLoadFm"></image>
					<view class="loadFm" v-else>
						<image src="/static/testglPic7.jpg"></image>
					</view>
				</view>
				<text v-if="isShowLoadFm">选一张喜欢的作为封面吧~</text>
				<input
				type="text" 
				placeholder="添加封面备注信息"
				placeholder-style="color:#B8B8B8"
				class="loadFm-input"
				v-if="!isShowLoadFm"/>
			</view>
			<!-- 录制音频 -->
			<view class="addYj-voice">
				<!-- 开始录音-->
				<view v-if="isShowVoice">
					<view class="voiceBtn" @touchstart="startRecord" @touchend="endRecord">
						<image src="/static/speakIco.png"></image>
					</view>
					<text>录制一段音频吧~</text>
				</view>
				<view v-else class="voiceCon">
					<view>
						<!-- 播放 -->
						<view @tap="playVoice" v-if="isShowPlay"><image src="/static/bofang1.png"></image></view>
						<!-- 暂停播放 -->
						<view @tap="pausedVoice" v-else><image src="/static/zantingtingzhi1.png"></image></view>
					</view>
					<!-- 	<view class="voiceLength">
							<view class="voiceLength1" :style="{width:voiceLength + 'px'}"></view>
						</view> -->
					<!-- 录音时长 -->
					<view class="voiceFr">
						<view class="voiceTime" v-if="isShowTime"><text>{{voiceTime}}</text></view>
						<view class="againBtn" @tap="againBtn"><text>重新录制</text></view>
					</view>
				</view>
			</view>
			<!-- 发布状态 -->
			<view class="addYj-status">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in statusList" :key="item.value">
						<view>
							<radio 
							:value="item.value" 
							:checked="index === current" 
							style="transform: scale(0.6)"
							color="#5494FF"/>
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<view>
				
			</view>
			
			
			<!-- 添加正文 -->
			<view class="addYj-con">
				<edit ref="edit" placeText="编写内容..."></edit>
					<view class="addYjPic">
						
						<!-- <input
						placeholder="编写内容.."
						placeholder-style="color:#999999;fontSize:28upx" />
						<view class="addYjPic-item" v-for="(pic,index) in addYjPicList" :key="index">
							<image 
							:data-index="index"
							:src="pic.path">
							</image>
							<image
							:data-index="index"
							class="addYj-close"
							src="/static/close-bg.png"
							@tap="delAddYjPic(index)">
							</image>
						</view>
						<view class="addyjBtn" @tap="addyjBtn">+</view> -->
					</view>
			</view>
			
			
		</view>
		<!-- 录音弹层 -->
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	import edit from '@/components/wjx-edit/wjx-edit'
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	
	innerAudioContext.autoplay = true;
	export default{
		components:{
			uniIcon,
			edit
		},
	  onLoad() {
			let self = this;
			recorderManager.onStop(function (res) {
				console.log('recorder stop' + JSON.stringify(res));
				// self.voicePath = res.tempFilePath;
				self.voicePath ='https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3';
			});
		},
		data(){
			return{
				navConfig:{
					comScroll:0,
					isFixed:false,
					left:{
						text:'返回',
						isShowLeft:true,
						leftGobackColor:'black',
						leftTextColor:'black',
					},
					mid:{
						isShowMid:true,
						text:'添加游记',
						ico:'',
						isShowIco:false,
						icoColor:''
					},
					right:{
						text:'发布',
						isShowRight:true,
					}
				},
				addYjPicList:[
					{
						path:'/static/banner.png'
					},
					{
						path:'/static/testglPic7.jpg'
					}
					
				],
				pop: {
					title: '删除此照片?',
					hintType: false
				},
				current:0, //默认公开状态
				voicePath: '', //录音临时储存路径
				isShowPlay:true,//默认显示播放按钮
				isShowVoice:true,//显示开始录音
				isShowTime:false,//默认隐藏开始录制和播放时长
				currentDeletePicIndex: '',//删除第index张图片
				voiceTime:'0.00',//录音时长
				addAddress:'',//添加地点
				statusList:[
					{name:'公开',value:'all'},
					{name:'仅自己可见',value:'myself'},	
				],
				isShowLoadFm:true,//默认展示默认上传封面
				loadFm:'',//上传封面路径
				
			}
		},
		methods:{
			//开始录音
			startRecord(){
				this.isShowTime = false;
				recorderManager.start();
				uni.showToast({
					title:'开始录音',
					icon:'none'
				});
			},
			//录音结束
			endRecord(){
				recorderManager.stop();
				uni.showToast({
					title:'结束录音',
					icon:'none'
				})
				this.isShowVoice = false;
					console.log('录音结束');
			},
			//从新录制
			againBtn(){
				uni.showModal({
					content:'是否重新录制',
					confirmText: "确定",
					confirmColor:"#55A0FF",
					cancelText: "取消",
					cancelColor:"#55A0FF",
					success:(res) => {
						if(res.confirm){
							innerAudioContext.stop();
							innerAudioContext.onStop(()=>{
								this.voiceTime = ''
							})
							this.isShowVoice = true;
							this.isShowPlay = true;
							console.log('用户点击确定');
						}else if(res.cancel){
							this.isShowVoice = false;
							this.isShowPlay = false;
							console.log('用户点击取消');
							
						}
					}
				})
			
			},
			//播放
			playVoice(){
				this.isShowPlay = false;
				if(this.voicePath){
					// https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3
					console.log(this.voicePath);
					innerAudioContext.src = this.voicePath;
					
					innerAudioContext.onPlay(()=>{
						this.voiceTime = innerAudioContext.duration.toFixed(2);
						this.isShowTime = true;
						console.log('开始播放');
					});
					
					// console.log(this.voiceTime);
					
				}
			},
			//暂停
			pausedVoice(){
				this.isShowPlay = true;
				if(this.voicePath){
					innerAudioContext.pause();
					console.log('暂停播放');
					}
			},
			// 监听是否发布
			radioChange(e){
				console.log(e);
			},
			//打开confirm询问用户是否删除点击的图片
			delAddYjPic(index){
				uni.showModal({
					content: "还没有发布呢，是否保留？",
					confirmText: "保留",
					confirmColor:"#55A0FF",
					cancelText: "不保留",
					cancelColor:"#55A0FF",
					success:(res) => {
						if(res.confirm){
							console.log('保留');
						}else if(res.cancel){
							console.log('不保留');
							this.addYjPicList.splice(index,1)
						}
					}
				})
			},
			// 用户确定删除照片后的处理
			
			
			//上传封面图片
			addFmBtn(){
				uni.chooseImage({
					count:1,
					success:(res) =>{
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url:'',
							filePath:tempFilePaths[0],
							name:'file',
							success:(uploadFileRes) =>{
								console.log(uploadFileRes.data);
							}
						})
					}
				})
			},
			// 上传内容图片
			addyjBtn(){
				uni.chooseImage({
					sizeType:['original','compressed'],
					sourceType:['album'],
					scuess:(res) =>{
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url:'',
							files:tempFilePaths,
							success:(uploadFileRes) =>{
								console.log(uploadFileRes.data);
							}
						})
					}
				})
			},
			//获取添加地点
			chooseLocation(){
				uni.chooseLocation({
					success:(res) => {
						console.log(res);
						this.addAddress = res.name
						console.log(this.addAddress);
					}
				})
			},
			// 右侧发布按钮
			rightTapHandle(){
				let editData = this.$refs.edit.submit();
				console.log(JSON.stringify(editData.editItems));
			}
		}
		
	}
</script>

<style>
	.addYjWrap{
		margin:66upx 28upx 0 28upx;
	}
	.addYjPic{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 16upx;
		margin-top: 20upx;
	}
	.addYjPic-item{
		width:154upx;
		height:154upx;
		margin-right: 20upx;
		position: relative;
		margin-bottom: 20upx;
	}
	.addYjPic-item:nth-of-type(4n){
		margin-right: 0;
	}
	.addYjPic-item image{
		width:696upx;
		height:332upx;
		border-radius: 20upx;
	}
	image.addYj-close{
		position: absolute;
		top:-8upx;
		right:-8upx;
		width:32upx;
		height: 32upx;
	}
	.addyjBtn{
		width:154upx;
		height: 154upx;
		border-radius: 10upx;
		border:1upx solid #DCDCDC;
		text-align: center;
		line-height: 154upx;
		color: #DCDCDC;
		font-size: 46upx;
	}
	.addYjTitle{
		border-bottom: 1upx solid #DCDCDC;
		padding-bottom: 26upx;
	}
	.addYjTitle input{
		font-size: 32upx;
		color: #666;
	}
	.addYj-con{
		padding-top: 26upx;
		position: relative;
		}
	.addYj-con input{
		margin-bottom:20upx;
		font-size: 28upx;
		color: #666;
		width: 100%;
	}
	.addFm{
		
	}
	.addFm image{
		width:101upx;
		height: 101upx;
	}
	.addFm text{
		font-size: 24upx;
		color: #B8B8B8;
		margin-left: 26upx;
		margin-top: -10upx;
	}
	.addYj-voice{
		margin:50upx auto 0 auto;
	}
	.voiceBtn{
		width:610upx;
		height: 72upx;
		line-height: 72upx;
		border-radius: 72upx;
		border:1upx solid  #A8D7FF;
		margin:0 auto 25upx auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.addYj-voice >view text{
		font-size: 24upx;
		color: #B8B8B8;
		display: block;
		text-align: center;
	}
	.voiceBtn > image{
		width:28upx;
		height: 44upx;
	}
	
	.addYj-address{
		display: flex;
		flex-direction: row;
		align-items: center;
		line-height: 82upx;
	}
	.addYj-address text{
		font-size: 28upx;
		color: #999999;
	}
	.addYj-address .addBlue{
		color: #83BAFF;
	}
	.addYj-status{
		margin-top: 46upx;
		
		font-size: 24upx;
		color: #333333;
	}
	.addYj-status radio-group{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	.addYj-status radio-group label{
		margin-left: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	.voiceCon{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 50upx;
		width:600upx;
		margin: auto;
	}
	.voiceCon > view{
		height: 50upx;
	}
	.voiceCon > view image{
		width: 50upx;
		height:50upx;
	}
	.voiceFr{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.voiceTime{
		margin-left: 34upx;
		color: #6ACDFF;
		font-size: 24upx;
	}
	.againBtn{
		color: #6ACDFF;
		font-size: 24upx;
		margin-left: 44upx;
	}
	.voiceLength{
		margin-left:30upx;
		width: 280upx;
		height: 50upx;
		background-color: #D3D2D2;
		position: relative;
	}
	.voiceLength1{
		position: absolute;
		height: 50upx;
		background-color: #577AFF;
		left: 0;
		top:0;
		z-index: 9;
	}
	.addFm .loadFm image{
		width:698upx;
		height: 334upx;
		border-radius: 20upx;
	}
	.loadFm-input{
		font-size: 24upx;
		display: block;
		text-align: center;
		color: #B8B8B8;
	}
</style>
